import React, { Component } from 'react';
import { Form, DatePicker } from 'antd'
import moment from 'moment'
import TheTable from "@/components/TheTable";
import TheImage from '@/components/TheImage';
import GoBack from '@/components/TheGoBack'
import _ from "lodash";
import { apiPostTimerCouponPage, apiPostTimerUserPage } from '@/request/couponManagement'

class View extends Component {
    constructor(props) {
        super(props)
        this.CouponListRef = React.createRef()
        this.UserListRef = React.createRef()
        this.state = {
            modalStatus: 0,
            title: '查看任务',
            taskId: this.props.match.params.id,
            pushDateTime: new URLSearchParams(props.location.search).get('time'),
            couponList: [],
            userList: [],
            userTableColumns: [{
                title: '用户id',
                dataIndex: 'memberId',
                key: 'memberId',
            },{
                title: '头像',
                dataIndex: 'memberAvatar',
                key: 'memberAvatar',
                render: (text) => {
                    if (text) {
                        let str = text.split(',')[0]
                        return <div>
                            {
                                text.split(',').map(item => <span style={{ marginRight: 10 }}><TheImage src={item} width={80} height={80} /></span>)
                            }
                        </div>
                    }
                }
            },{
                title: '昵称',
                dataIndex: 'nickName',
                key: 'nickName',
            },{
                title: '手机号',
                dataIndex: 'memberMobile',
                key: 'memberMobile',
            },{
                title: '身份',
                dataIndex: 'memberType',
                key: 'memberType',
                render: (text, render) => {
                    let label = ''
                    switch (text) {
                      case 'R':
                        label = '注册会员'
                        break;
                      case "P":
                        label = '正式会员'
                        break;
                      case "S":
                        label = "商户会员"
                        break;
                      default:
                        label = "返回值错误"
                    }
                    return label;
                  }
            },{
                title: '状态',
                dataIndex: 'memberStatus',
                key: 'memberStatus',
                render: text => {
                    let label = ''
                    switch (text) {
                      case 'Y':
                        label = '正常'
                        break
                      case 'N':
                        label = '冻结'
                        break
                      default:
                        label = '返回值错误'
                        break
                    }
                    return label;
                }
            },{
                title: '注册时间',
                dataIndex: 'memberCreatedTime',
                key: 'memberCreatedTime',
            }],
            selecteduserPageData: {
                pageNo: 1,
                pageSize: 10,
                totalCount: 0,
            },
            couponTableColumns: [{
                title: '优惠券id',
                dataIndex: 'couponId',
                key: 'couponId',
            },{
                title: '优惠券名称',
                dataIndex: 'couponTitle',
                key: 'couponTitle',
            },{
                title: '优惠券类型',
                dataIndex: 'couponType',
                key: 'couponType',
                render: (text, render) => {
                    let label = ''
                    switch (text) {
                        case "J":
                            label = "代金券"
                            break;
                        case "Z":
                            label = "折扣券"
                            break;
                        default:
                            label = "字段值错误"
                    }
                    return label
                }
            },{
                title: '范围',
                dataIndex: 'commodityScope',
                key: 'commodityScope',
                render: (text, render) => {
                    let label = ''
                    switch (text) {
                        case 0:
                            label = "全部商品可用"
                            break;
                        case 1:
                            label = "限制品类可用"
                            break;
                        case 2:
                            label = "商品券"
                            break;
                        default:
                            label = "字段值错误"
                    }
                    return label
                }
            },{
                title: '优惠',
                dataIndex: "couponPrice",
                key: "couponPrice",
                render: (text, render) => {
                    let label = ''
                    switch (render.couponType) {
                        case 'J':
                            label = "减免"+text/100+"元"
                            break;
                        case 'Z':
                            label = "打"+text+"折"
                            if (render.couponMaxPrice !== -1){
                                label+= ',最大折扣金额'+(render.couponMaxPrice)/100+'元'
                            }
                            break;
                        default:
                            label = "字段值错误"
                    }
                    return label
                }
            },{
                title: '状态',
                dataIndex: "activeStatus",
                key: "activeStatus",
                render: (text, render) => {
                    let label = ''
                    switch (text) {
                        case 0:
                            label = "未开始"
                            break;
                        case 1:
                            label = "进行中"
                            break;
                        case 2:
                            label = "已结束"
                    }
                    return label
                }
            },{
                title: '最近修改时间',
                dataIndex: 'updateTime',
                key: 'updateTime',
                render:(text)=>{
                    return (
                        <>{text?moment(text).format('yyyy-MM-DD HH:mm'):'/'}</>
                    )
                }
            }],
            couponselectedPageData: {
                pageNo: 1,
                pageSize: 10,
                totalCount: 0,
            }
        }
        this.pageType = new URLSearchParams(props.location.search).get('type')
    }
    sendTimeFormRef = React.createRef()
    idFormRef = React.createRef()


    async componentDidMount() {
        let couponres = await apiPostTimerCouponPage({ pageNo: 1, pageSize: -1, couponTimerCenterId: this.state.taskId })
        let userres = await apiPostTimerUserPage({ pageNo: 1, pageSize: -1, couponTimerCenterId: this.state.taskId })
        this.setState({
            couponList: couponres.rows.map(item => item.couponInfo),
            userList: userres.rows.map(item => item.memberInfo)
        })
        this.sendTimeFormRef.current.setFieldsValue({
            pushDateTime: moment(this.state.pushDateTime),
            couponList: this.state.couponList,
            userList: this.state.userList
        })
        
    }

    userselectedPageChange(current,pageSize) {
        this.setState({
            selecteduserPageData: {
                pageNo:current,
                pageSize
            }
        })
    }

    selectedPageChange(current,pageSize) {
        this.setState({
            couponselectedPageData: {
                pageNo:current,
                pageSize
            }
        })
    }

    render() {
        const { modalStatus, title, couponList, userList, userTableColumns, selecteduserPageData, couponTableColumns, couponselectedPageData } = this.state
        return (
            <div className="p-layout-box">
                <GoBack history={this.props.history} title={title}></GoBack>
                <p style={{ height: "15px", width: "100%" }}></p>
                <Form
                    ref={this.sendTimeFormRef}
                    onFinish={(value) => this.handleSubmit(value)}
                    labelCol={{
                        span: 2,
                    }}
                    wrapperCol={{
                        span: 20,
                    }}
                >
                    <Form.Item
                        name="pushDateTime"
                        label="发送时间"
                        rules={[
                            {
                                required: true,
                            }
                        ]}
                    >
                        <DatePicker
                            disabled
                            format="YYYY-MM-DD HH:mm"
                            
                        />
                    </Form.Item>
                    <Form.Item
                        label="优惠券"
                        name="couponList"
                        rules={[
                            {
                                required: true,
                                // validator: this.validateCouponList
                            }
                        ]}
                    >
                        <TheTable dataSource={couponList} bordered size="middle"
                            pagination={{
                                showTotal: () => `共${couponList.length}条`,
                                pageSize: couponselectedPageData.pageSize,
                                onChange: (current,pageSize) => this.selectedPageChange(current,pageSize)
                            }}
                            columns={[...couponTableColumns]}
                            rowKey={(record) => record.couponId}
                        ></TheTable>
                    </Form.Item>
                    <Form.Item
                        label="发送人群"
                        name="userList"
                        rules={[
                            {
                                required: true,
                                // validator: this.validateUserList
                            }
                        ]}
                    >
                        <TheTable dataSource={userList} bordered size="middle"
                            pagination={{
                                showTotal: () => `共${userList.length}条`,
                                pageSize: selecteduserPageData.pageSize,
                                onChange: (current,pageSize) => this.userselectedPageChange(current,pageSize)
                            }}
                            columns={userTableColumns}
                        ></TheTable>
                    </Form.Item>
                    
                </Form>
            </div>
        )
    }
}

export default View
